<template>
	<view class="box">
		<!-- 头部 -->
		<tui-navigation-bar class="navigationBar" :isOpacity="false" >
			<view class="tui-content-box">
				<view>
					<tui-icon name="arrowleft" color="#ffffff" @click="backTo"></tui-icon>
				</view>
				<view class="tui-content-tit">
					<view>每日任务</view>
				</view>
			</view>
		</tui-navigation-bar>
		<view class="img">
			<image src="../../static/img/me/mission.png" mode=""></image>
		</view>
		<view class="main">
			<view class="wexin" @click="wexin(1)">
				<image src="../../static/img/me/mission_circle_friends.png" mode=""></image>
				<view class="content">微信朋友圈分享</view>
				<view class="number">
					(<text>{{wx?wx:0}}</text>/3)
				</view>
			</view>

			<view class="wexin xiaohongshu" @click="wexin(2)">
				<image src="../../static/img/me/mission_red_book.png" mode=""></image>
				<view class="content">小红书种草</view>
				<view class="number">
					(<text>{{xhs?xhs:0}}</text>/1)
				</view>
			</view>

			<view class="wexin tianmao" @click="wexin(3)">
				<image src="../../static/img/me/mission_taobao.png" mode=""></image>
				<view class="content">天猫/淘宝（网店）刷评</view>
				<view class="number">
					(<text>{{tb?tb:0}}</text>/1)
				</view>
			</view>

		</view>


	</view>
</template>
<script>
	export default {

		data() {
			return {
				tb: "",
				xhs: "",
				wx: "",

			}
		},

		onLoad() {
			this.loadData()
		},

		methods: {
			backTo(){
				uni.navigateBack({
					
				})
			},
			wexin(index) {
				uni.navigateTo({
					url: `/pages/user/sharingFriends?taskType=${index}`
				})
			},
			loadData() {
				this.tui.request('/app/tasks/index', 'GET', {}, false, false, false, )
					.then(res => {
						if (res.errno == 0) {
							console.log(res.data);
							this.wx = res.data.wx;
							this.xhs = res.data.xhs;
							this.tb = res.data.tb;
						} else {

						}

					})
			},
		}
	}
</script>
<style lang='scss'>
	page {
		width: 100%;
		height: 100%;
		background-color: #FAFAFA;
	}
	/*navigation-bar*/
	.navigationBar{
		background: url(../../static/img/me/mission.png) no-repeat;
		background-size: 100% 600upx;
		margin-bottom: 10px;
	}
	
	.tui-content-box {
		width: 100%;
		height: 44px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
		
	.tui-content-tit{
		width: 100%;
		height: 56upx;
		margin: 0 100rpx;
		color: #ffffff;
		font-size: 18px;
		padding: 0 12px;
		text-align: center;
		margin-left: 46rpx;
	}
	
	.tui-search-box {
		width: 100%;
		height: 56upx;
		margin: 0 100rpx;
		border-radius: 18px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: border-box;
		color: #bfbfbf;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, .2);
	}
	
	.tui-search-text {
		color: #ffffff;
		padding-left: 10rpx;
	}
	
	
	.box {
		height: 100%;

		.img {
			width: 100%;
			height: 552upx;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.main {
			width: 90%;
			margin: 0 auto;
			background: #FAFAFA;
			border-radius: 10px;
			position: relative;
			top: -40upx;
			z-index: 11;

			.wexin {
				width: 100%;
				display: flex;
				align-items: center;
				border-radius: 10px;
				/* border: 1px solid #FFFFFF; */
				box-shadow: 0px 1px 5px 0px rgba(110, 96, 158, 0.1);
				padding-top: 44upx;
				padding-bottom: 44upx;

				image {
					width: 40upx;
					height: 40upx;
					margin-left: 10px;
				}

				.content {
					color: #333333;
					font-size: 16px;
					padding-left: 9px;
				}

				.number {
					color: #333333;
					font-size: 16px;
					padding-left: 9px;

					text {
						color: #6E609E;
					}
				}

			}

			.xiaohongshu {
				margin-top: 20px;
			}

			.tianmao {
				margin-top: 20px;
			}

		}


	}
</style>
